<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-9-9
  Time: 下午7:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>周次时间划分</title>
    <style>
        .weekselected {
            background-color: #68b996;
        }

        .houseInfoselected {
            background-color: #68b996;
        }
    </style>
    <script src="/static/datepicker/WdatePicker.js"></script>
    <script>
        $(function () {
            houseBaseAreaChange();

            $("#submit").click(function () {
                var time = '';
                var start = $(".start");
                var end = $(".end");
                for (var i = 0; i < start.length; i++) {
                    time += start.eq(i).val() + "," + end.eq(i).val() + ";";
                }
                var houseWeekGuid = $("#weekType").val();
                $.ajax({
                    url: '/house_week_time/divide_time',
                    type: 'post',
                    data: {houseWeekGuid: houseWeekGuid, time: time},
                    success: function (data) {
                        location.reload();
                    }
                })
            })
        });


        function houseBaseAreaChange() {
            var area = $("#houseBaseArea").val();
            $.ajax({
                url: '/house_week_time/find_house_info/' + area,
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    $("#houseInfo").html(data);
                }, error: function () {
                    alert('error');
                }
            })
        }

        function add() {
            var content = '<tr><td>时间：</td><td>开始:<input type="text" class="start laydate-icon Wdate" onfocus="WdatePicker({isShowOK: false})"/></td><td></td><td>结束:<input type="text" class="end laydate-icon Wdate" onfocus="WdatePicker({isShowOK: false})"/></td></tr>';
            $(".table").append(content);
        }
        function del() {
            if ($("#timeContent ~ tr").length > 0) {
                $(".table tr:last").remove();
            }
        }

        function houseInfoChange(guid) {
            $(this).siblings().removeClass("houseInfoselected");
            $(this).addClass("houseInfoselected");
            $(this).html("已选");

            var area = $("#houseBaseArea").val();
            $.ajax({
                url: '/house_week_time/find_week_type/' + area + '/' + guid,
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    $("#weekType").html(data);
                }, error: function () {
                    alert('error');
                }
            })
        }
    </script>
</head>
<body>
<div class="backend">
    <table class="table table-striped" style="height: 45px;">
        <tr>
            <td style="width:6%">区域：</td>
            <td style="width:400px;">
                <select id="houseBaseArea" onchange="houseBaseAreaChange()">
                    <c:forEach items="${areas}" var="area">
                        <option value="${area.name}">${area.label}</option>
                    </c:forEach>
                </select>
            </td>
            <td style="width:8%">度假屋：</td>
            <td id="houseInfo"></td>
        </tr>
        <tr>
            <td>周次：</td>
            <td>
                <select id="weekType"></select>
            </td>
        </tr>
        <tr>
            <td>操作：</td>
            <td><a href="javascript:void(0)" onclick="add()">添加</a>&nbsp;
                <a href="javascript:void(0)" onclick="del()">删除</a></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="timeContent">
            <td>时间：</td>
            <td>开始:<input type="text" class="start laydate-icon Wdate" onfocus="WdatePicker({isShowOK: false})"/></td>
            <td></td>
            <td>结束:<input type="text" class="end laydate-icon Wdate" onfocus="WdatePicker({isShowOK: false})"/></td>
        </tr>
    </table>
    <input type="button" class="btn btn-success" value="保存" id="submit"/>
    <input type="button" id="backList" class="btn btn-info" value="返回列表">
</div>
</body>
</html>